import {Component} from 'react'

export default class Parent extends Component{
    state = {
        childMsg:"will receive child msg"
    }


    getChildMsg = (childMsg) => {
        this.setState({childMsg:childMsg})
    }
    render(){
        return (
            <>
            <h2>父组件</h2>
            <div>{this.state.childMsg}</div>
            <Child toParentMsg={this.getChildMsg}/>
            </>
        )
    }
}


class Child extends Component{
    state = {
        toParentMsg:"child to parnet msg"
    }
    giveParentMsg = () => {
        // 尽量不要在render方法中调用props等，可能直接改变状态的方法
        this.props.toParentMsg(this.state.toParentMsg)
    }

    render(){
        return (
            <>
            <h2>子组件</h2>
            <button onClick={this.giveParentMsg}>给父组件信息</button>
            </>
        )
    }
}